let ids;
let userInfo;
let flag
$(function (){

    $.ajax({
        headers: {
            "token": localStorage.getItem("token")
        },
        type: 'get',
        url: serverConfig.serverUrl +'/devs/user',
        async: false,//取消异步请求
        success: function (result) {
            if (result.code != 200) {
                localStorage.removeItem('token')
                // window.location.href = '/dev/html/login.html';
            } else {
                userInfo = result.data;
            }
        }
    })
    ids=window.location.search.substr(0).split("=")[1];

    let str = '';
    let jsonData={id:ids}

    $.ajax({
        type:'get',
        url:serverConfig.serverUrl +'/devs/movie/findById',
        data:jsonData,
        async:false,
        success:function (result){
            let data = result.data;
             console.log(data)
            let img=data.posterImg;
            let title=data.title;
            let country=data.country;
            let duration=data.duration;
            let firstDate=data.firstDate;
            let content=data.content;
            let numbers=data.numbers;
            let score=data.score;
            str=` <div class="wrapper clearfix">
        <div class="celeInfo-left">
            <div class="avatar-shadow" id="avatars">
                <img class="avatar" src="../imgs/movie-img/${img}" alt="">
                <div class="movie-ver">
                    <i class="imax2d"></i>
                </div>
            </div>
        </div>
        <div class="celeInfo-right clearfix">
            <div class="movie-brief-container">
                <h1 class="name">${title}</h1>
                <div class="ename ellipsis">The Volunteers: To the War</div>
                <ul>
                    <li class="ellipsis" id="types">
                    </li>
                    <li class="ellipsis">${country} / ${duration}分钟</li>
                    <li class="ellipsis">${firstDate} 18:00${country}上映</li>
                </ul>
            </div>
            <div class="action-buyBtn">
                <div class="action clearfix">
                    <a class="wish" href="#"onclick="heart()">
                        <div>
                            <i class="icon wish-icon"></i>
                            <span class="wish-msg">想看</span>
                        </div>
                    </a>
                    <a class="score-btn" href="#" onclick="star()">
                        <div>
                            <i class="icon score-btn-icon"></i>
                            <span class="score-btn-msg">评分</span>
                        </div>
                    </a>
                    <a class="btn buy" href="../html/session.html?id=${ids}">特惠购票</a>
                </div>
            </div>
            <div class="movie-stats-container">
                <div class="movie-index">
                    <p class="movie-index-title">猫眼口碑</p>
                    <div class="movie-index-content">
                            <span class="index-left info-num">
                                <span class="stonefont">${score}</span>
                            </span>
                        <div class="index-right">
                            <div class="star-wrapper">
                                <div class="star-on" style="width: 97%;"></div>
                            </div>
                            <span class="score-num">
                                    <span class="stonefont">${numbers}人评分</span>
                                </span>
                        </div>
                    </div>
                </div>
                <div class="movie-index">
                    <p class="movie-index-title">累计票房</p>
                    <div class="movie-index-content box">
                        <span class="stonefont">${numbers}</span>
                        <span class="unit">万</span>
                    </div>
                </div>
            </div>
        </div>

    </div>`
               str2=`  <div class="main-content-container clearfix">
        <div class="main-content">
            <div class="tab-container tab-movie-info">
                <div class="crumbs-nav-container">
                    <a href="../html/index.html">票无忧电影</a>
                    >
                    <a href="../html/movies.html">电影</a>
                    >
                    <span>${title}</span>
                </div>
                <div class="tab-title-container clearfix">
                    <div class="tab-title active"onclick="poster_list_click(this)"><a
                            href="javascript:;">介绍</a></div>
                    <div class="tab-title"onclick="poster_list_click(this)" id="tab-title-more"><a
                            href="javascript:;">演职人员</a></div>
                    <div class="tab-title tab-disabled">奖项</div>
                    <div class="tab-title"onclick="poster_list_click(this)" id="tab-img-more"><a
                            href="javascript:;">图集</a></div>
                </div>
                <div class="tab-content-container">
                    <div class="tab-desc tab-content active" id="taby" style="display: ">
                        <div class="module">
                            <div class="mod-title">
                                <h2>剧情简介</h2>
                            </div>
                            <div class="mod-content">
                                    <span class="dra">
                                        ${content}
                                    </span>
                            </div>
                        </div>
                        <div class="module">
                            <div class="mod-title">
                                <h2>
                                    演职人员
                                </h2>
                                <a class="more" href="#" onclick="more()">全部</a>
                            </div>
                            <div class="mod-content">
                                <div class="celebrity-container clearfix">
                                    <div class="celebrity-group">
                                        <div class="celebrity-type">导演</div>
                                        <ul class="celebrity-list clearfix">
                                            <li class="celebrity">
                                                <div class="portrait">
                                                    <img class="default-img" src="../imgs/moviedatas/vactor1.jpg"
                                                         alt="志愿者：雄兵出击">
                                                </div>
                                                <div class="info">陈凯歌</div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="celebrity-group">
                                        <div class="celebrity-type">演员</div>
                                        <ul class="celebrity-list clearfix">
                                            <li class="celebrity actor">
                                                <div class="portrait">
                                                    <img class="default-img" src="../imgs/moviedatas/vactor2.jpg" alt="">
                                                </div>
                                                <div class="info">
                                                    <div class="name">唐国强</div>
                                                </div>
                                            </li>
                                            <li class="celebrity actor">
                                                <div class="portrait">
                                                    <img class="default-img" src="../imgs/moviedatas/vactor3.jpg" alt="">
                                                </div>
                                                <div class="info">
                                                    <div class="name">雷佳音</div>
                                                </div>
                                            </li>
                                            <li class="celebrity actor">
                                                <div class="portrait">
                                                    <img class="default-img" src="../imgs/moviedatas/vactor4.jpg" alt="">
                                                </div>
                                                <div class="info">
                                                    <div class="name">张国立</div>
                                                </div>
                                            </li>
                                            <li class="celebrity actor">
                                                <div class="portrait">
                                                    <img class="default-img" src="../imgs/moviedatas/vactor5.jpg" alt="">
                                                </div>
                                                <div class="info">
                                                    <div class="name">于和伟</div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="module">
                            <div class="mod-title">
                                <h2>图集</h2>
                                <a class="more" href="#" onclick="img()">全部</a>
                            </div>
                            <div class="mod-content">
                                <div class="album clearfix">
                                    <div class="img1">
                                        <img src="../imgs/moviedatas/img01.jpg" alt="">
                                    </div>
                                    <div class="img2">
                                        <img src="../imgs/moviedatas/img02.jpg" alt="">
                                    </div>
                                    <div class="img3">
                                        <img src="../imgs/moviedatas/img02.jpg" alt="">
                                    </div>
                                    <div class="img4">
                                        <img src="../imgs/moviedatas/img02.jpg" alt="">
                                    </div>
                                    <div class="img4">
                                        <img src="../imgs/moviedatas/img02.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="module">
                            <div class="mod-title">
                                <h2>
                                    影片资料
                                </h2>
                            </div>
                            <div class="mod-content">
                                <div class="attribute">
                                    <div class="attribute-item">
                                        <div class="attribute-item-top">
                                            <img class="attribute-item-icon" src="" alt="">
                                            <span class="attribute-item-title">出品发行</span>
                                        </div>
                                        <div class="attribute-item-content ellipsis">中影创意（北京）电影有限公司</div>
                                    </div>
                                    <div class="attribute-item">
                                        <div class="attribute-item-top">
                                            <img class="attribute-item-icon" src="" alt="">
                                            <span class="attribute-item-title">技术参数</span>
                                        </div>
                                        <div class="attribute-item-content ellipsis">2小时20分钟</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="module">
                            <div class="mod-title">
                                <h2>
                                    票房
                                </h2>
                            </div>
                            <div class="mod-content">
                                <a class="film-mbox-more" target="_blank" href="#">票房详情</a>
                                <div class="film-mbox">
                                    <div class="film-mbox-item ">
                                        <div class="mbox-name">3</div>
                                        <div class="mbox-name">昨日排名</div>
                                    </div>
                                    <div class="film-mbox-item ">
                                        <div class="mbox-name">25097</div>
                                        <div class="mbox-name">首周票房（万）</div>
                                    </div>
                                    <div class="film-mbox-item ">
                                        <div class="mbox-name">25097</div>
                                        <div class="mbox-name">累计票房（万）</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-celebrity tab-content"id="tabt" style="display: none">
                            <div class="celebrity-container">
                                <div class="celebrity-group">
                                    <div class="celebrity-type">导演
                                        <span class="num">(1)</span>
                                    </div>
                                    <ul class="celebrity-list clearfix">
                                        <li class="celebrity">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor1.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">陈凯歌</div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="celebrity-group">
                                    <div class="celebrity-type">
                                        演员
                                        <span class="num">(17)</span>
                                    </div>
                                    <ul class="celebrity-list clearfix">
                                        <li class="celebrity actor">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor2.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">唐国强</div>
                                                <br>
                                                <span class="role">饰：毛泽东</span>
                                            </div>
                                        </li>
                                        <li class="celebrity actor">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor3.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">雷佳音</div>
                                                <br>
                                                <span class="role">饰：苏江明</span>
                                            </div>
                                        </li>
                                        <li class="celebrity actor">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor3.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">张国立</div>
                                                <br>
                                                <span class="role">饰：郑刚</span>
                                            </div>
                                        </li>
                                        <li class="celebrity actor">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor4.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">于和伟</div>
                                                <br>
                                                <span class="role">饰：黎志田</span>
                                            </div>
                                        </li>
                                        <li class="celebrity actor">
                                            <div class="portrait">
                                                <img class="default-img" src="../imgs/moviedatas/vactor5.jpg" alt="">
                                            </div>
                                            <div class="info">
                                                <div class="name">周冬雨</div>
                                                <br>
                                                <span class="role">饰：李惠琳</span>
                                            </div>
                                        </li>
<!--                                        <li class="celebrity actor">-->
<!--                                            <div class="portrait">-->
<!--                                                <img class="default-img" src="../imgs/moviedatas/vactor.jpg" alt="">-->
<!--                                            </div>-->
<!--                                            <div class="info">-->
<!--                                                <div class="name">程凯歌</div>-->
<!--                                                <br>-->
<!--                                                <span class="role">饰：毛泽东</span>-->
<!--                                            </div>-->
<!--                                        </li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                     <div class="tab-img tab-content"id="tabr"  style="display: none">
                            <ul class="clearfix">
                                <li>
                                    <img class="default-img" src="../imgs/moviedatas/vactor5.jpg" alt="">
                                </li>
                                 <li>
                                    <img class="default-img" src="../imgs/moviedatas/vactor6.jpg" alt="">
                                </li>
                            </ul>
                        </div>
                </div>
            </div>
        </div>
        <div class="related">
            <div class="tab-container tab-relate-info">
                <div class="tab-content-container">
                    <div class="tab-preview tab-content active">
                        <div class="module">
                            <div class="mod-title">
                                <h2>预告片</h2>
                            </div>
                            <div class="mod-content">
                                <div class="previer-container">
                                    <ul>
                                        <li class="top-list">
                                            <div class="top-info-thumb">
                                                <a href="#">
                                                    <img src="../imgs/moviedatas/img001.jpg" alt="">
                                                    <i class="ranking top-info-icon orange-bg">1</i>
                                                    <i class="play-icon"></i>
                                                </a>
                                            </div>
                                            <div class="top5-video-info">
                                                <p class="one-line">
                                                    <a href="#">《志愿者：雄兵出击》</a>
                                                </p>
                                                <div class="video-view">
                                                        <span class="video-play-count">
                                                            513.1万
                                                        </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>`
            $("#middle_box").append(str2)
            document.getElementById("avatars").innerHTML=str
        }
    })
    $.ajax({
        type:'get',
        url:serverConfig.serverUrl +'/devs/type',
        data:{movieId:ids},
        success:function (result){
            if (result.code == 200){
                let data = result.data;
                let str ='';
                for (let i in data) {
                    if (data[i] == 1 && i != 'id' && 1 != 'movieId') {
                        switch (i) {
                            case 'love':
                                str += "爱情 ";
                                break;
                            case 'comedy':
                                str += "喜剧 ";
                                break;
                            case 'animation':
                                str += "动画 ";
                                break;
                            case 'story':
                                str += "剧情 ";
                                break;
                            case 'horror':
                                str += "恐怖 ";
                                break;
                            case 'frightened':
                                str += "惊悚 ";
                                break;
                            case 'science_fiction':
                                str += "科幻 ";
                                break;
                            case 'action':
                                str += "动作 ";
                                break;
                            case 'suspense':
                                str += "悬疑 ";
                                break;
                            case 'crime':
                                str += "犯罪 ";
                                break;
                            case 'adventure':
                                str += "冒险 ";
                                break;
                            case 'warfare':
                                str += "战争 ";
                                break;
                            case 'strange':
                                str += "奇幻 ";
                                break;
                            case 'movement':
                                str += "运动 ";
                                break;
                            case 'family':
                                str += "家庭 ";
                                break;
                            case 'ancient_costume':
                                str += "古装 ";
                                break;
                            case 'swordsman':
                                str += "武侠 ";
                                break;
                            case 'west':
                                str += "西部 ";
                                break;
                            case 'history':
                                str += "历史 ";
                                break;
                            case 'special_note':
                                str += "传记 ";
                                break;
                            case 'song_dance':
                                str += "歌舞 ";
                                break;
                            case 'film_noir':
                                str += "黑色电影 ";
                                break;
                            case 'shorts':
                                str += "短片 ";
                                break;
                            case 'documentary':
                                str += "纪录片 ";
                                break;
                            case 'traditional':
                                str += "戏曲 ";
                                break;
                            case 'music':
                                str += "音乐 ";
                                break;
                            case 'calamity':
                                str += "灾难 ";
                                break;
                            case 'youth':
                                str += "青春 ";
                                break;
                            case 'children':
                                str += "儿童 ";
                                break;
                            case 'anime':
                                str += "动漫 ";
                                break;
                            case 'other':
                                str += "其他 ";
                                break;
                        }
                    }
                }
                document.getElementById("types").innerHTML = `<a class="text-link" href="../html/movies.html" target="_self">${str}</a>`
            }else {

            }
        }
    })
    if (userInfo != null){
        let userId=userInfo.id
        $.ajax({
            type:'get',
            url:serverConfig.serverUrl +`/devs/movie/isCollect/${ids}/${userId}`,
            success:function (result){
                if(result.code==500){
                    document.getElementsByClassName("wish")[0].className="wish active";
                    flag=false
                }else {
                    document.getElementsByClassName("wish")[0].className="wish";
                    flag=true
                }
            }

        })
        $.ajax({
            type:'get',
            url:serverConfig.serverUrl +`/devs/movie/isScore/${ids}/${userId}`,
            success:function (result){
                console.log(result)
                if(result.code==500){
                    document.getElementsByClassName("score-btn")[0].className="score-btn active";
                    document.getElementsByClassName("score-btn-msg")[0].innerHTML="已评分"
                   isFirstClick = false;
                }else {
                    isFirstClick = true;
                    document.getElementsByClassName("score-btn active")[0].className="score-btn";
                    document.getElementsByClassName("score-btn-msg")[0].innerHTML="评分"
                }
            }

        })
    } else {
        flag=true
    }

})
function getMovieCollectionStatus(movieId){
    let collectionStatus=localStorage.getItem(movieId);
    return collectionStatus=="true";
}
function updateMovieCollectionStatus(movieId,isCollected){
    localStorage.setItem(movieId,isCollected);
}


function heart(){
    if (userInfo == null){
        layer.msg('你还未登录!', {icon: 2})
        return;
    }
    let movieId=window.location.search.substr(0);

    let isMovieCollected=getMovieCollectionStatus(ids);
if(flag){
    if(!isMovieCollected){
        // updateMovieCollectionStatus(movieId,true)
        flag=false;
        document.getElementsByClassName("wish")[0].className="wish active";
        $.ajax({
            type:'post',
            url:serverConfig.serverUrl +`/devs/movie/${ids}/${userInfo.id}`,
            success:function (result){
                if(result==200){
                    console.log(result);
                }
            }

        })
    }

}else {
    updateMovieCollectionStatus(movieId,false);
    flag=true;
    document.getElementsByClassName("wish active")[0].className="wish";
    $.ajax({
        type:'post',
        url:serverConfig.serverUrl +`/devs/movie/${ids}/${userInfo.id}`,

        success:function (result){
                console.log(result);

        }

    })
}
}
let isFirstClick = true;
function star(){
    if (userInfo == null){
        layer.msg('你还未登录!', {icon: 2})
        return;
    }
    // count++;
    if(isFirstClick){

        var index = layer.open({
            type: 1, // page 层类型
            area: ['200px', '100px'],
            title: '请进行评分',
            shade: 0.5, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            content: '<div id="ID-rate-demo-half-2"></div>'
        });
        layui.use(['rate', 'layer'], function(){
            let rate = layui.rate;
            let layer = layui.layer;
            rate.render({
                elem: '#ID-rate-demo-half-2',
                value: 0,
                half: true,
                text: true,
                choose: function(value){
                    $.ajax({
                        type:"post",
                        url:serverConfig.serverUrl +`/devs/movie/${ids}/${userInfo.id}/${value}`,
                        success:function (result){

                    }
                    })
                    layer.close(index);
                }
            });
        });
        document.getElementsByClassName("score-btn")[0].className="score-btn active";
        document.getElementsByClassName("score-btn-msg")[0].innerHTML="已评分"
        isFirstClick = false;

    }else {
        isFirstClick = true;
        document.getElementsByClassName("score-btn active")[0].className="score-btn";
        document.getElementsByClassName("score-btn-msg")[0].innerHTML="评分"
        $.ajax({
            type:"post",
            url:serverConfig.serverUrl +`/devs/movie/${ids}/${userInfo.id}/-1`,
        })
    }


}
function poster_list_click(obj){
    document.getElementsByClassName("tab-title active")[0].className = "tab-title";
    obj.className="tab-title active"
    let a = obj.querySelector("a");
    let yMsg = document.querySelector("#taby");
    let tMsg = document.querySelector("#tabt");
    let rMsg = document.querySelector("#tabr");
    if (a.innerHTML == "介绍") {
        yMsg.style.display = 'block'
        tMsg.style.display='none'
         rMsg.style.display='none'

    } else if (a.innerHTML == "演职人员") {
        yMsg.style.display = 'none'
        tMsg.style.display='block'
        rMsg.style.display='none'
    }else if (a.innerHTML == "图集") {
        yMsg.style.display = 'none'
        tMsg.style.display='none'
        rMsg.style.display='block'
    }

}
function more(){
    document.getElementsByClassName("tab-title active")[0].className = "tab-title";
    document.getElementById("tab-title-more").className = "tab-title active";
    let yMsg = document.querySelector("#taby");
    let tMsg = document.querySelector("#tabt");
    let rMsg = document.querySelector("#tabr");
    yMsg.style.display = 'none'
    tMsg.style.display='block'
    rMsg.style.display='none'
}
function img(){
    document.getElementsByClassName("tab-title active")[0].className = "tab-title";
    document.getElementById("tab-img-more").className = "tab-title active";
    let yMsg = document.querySelector("#taby");
    let tMsg = document.querySelector("#tabt");
    let rMsg = document.querySelector("#tabr");
    yMsg.style.display = 'none'
    tMsg.style.display='none'
    rMsg.style.display='block'
}
